<script type="text/javascript" src="/Public/js/jquery.form.min.js"></script>
<div class="form">
  <form method='post' id="form_do" name="form_do" action="{:U(MODULE_NAME.'/Product/selladd')}">
    <dl>
      <dt> 产品类型：</dt>
      <dd>
        <select name="type">
          <option value="1">自由行</option>
          <option value="2">当地游</option>
        </select>
      </dd>
    </dl>
    <dl>
      <dt> 所属兴趣：</dt>
      <dd>
          <foreach name="catArr" item="catArr">
          <input type="checkbox" name="catID[]" value="{$catArr.id}" style="margin-left:10px;" />{$catArr.name}
          </foreach>
      </dd>
    </dl>
    <dl>
      <dt>线路名称：</dt>
      <dd>
        <input type="text" name="title" class="inp_one inp_w550" maxlength="30"  /><font color="red">(最长30个字符)</font>
        &nbsp;<input type="checkbox" name="verify"  value="0" />&nbsp;二次确认
        &nbsp;<input type="checkbox" name="special" value="1" />&nbsp;特殊产品
      </dd>
    </dl>
    <dl>
      <dt>扩展名称：</dt>
      <dd>
        <input type="text" name="extend" class="inp_one inp_w550" maxlength="35"  /> <font color="red">(最长35个字符)</font>
      </dd>
    </dl>
    <dl>
      <dt>主站分类：</dt>
      <dd>
        <select name="categoryID" onchange="packCategory(this)">
          <option value="0">请选择</option>
          <foreach name="categoryArr" item="categoryArr">
          <option value="{$categoryArr.id}">{$categoryArr.name}</option>
          </foreach>
        </select>
      </dd>
    </dl>
    <dl>
      <dt>主站分类标签：</dt>
      <dd id="categoryLabelList">
      </dd>
    </dl>
    <dl>
      <dt>出发地：</dt>
      <dd>
        <div class="selectDepartureNums">
          <div class="selectDeparture" style="float: left;">
            {$departureHtml['0']}
          </div>
          <div class="operateDeparture" style="float: left;">
            <a href="javascript:;" onclick="departureCityAdd(this)">添加</a>
          </div>
          <div class="clear"></div>
        </div>
      </dd>
    </dl>
    <dl>
      <dt> 目的地：</dt>
      <dd>
        <div class="selectDestinationNums" style="margin-top: 10px;">
            <div class="selectDestination" style="float: left;">
              {$destinationHtml.areaSelect}
              {$destinationHtml.countrySelect}
              {$destinationHtml.citySelect}
            </div>
            <div class="operateDestination" style="float: left;">
              <a href="javascript:;" onclick="destinationHtmlAdd(this)">添加</a>
            </div>
            <div class="clear"></div>
        </div>
      </dd>
    </dl>
    <dl>
      <dt> 出发时间：</dt>
      <dd>
        <input type="text" name="departureDate" class="inp_default"  >
      </dd>
    </dl>
    <dl>
      <dt> 行程天数 ：</dt>
      <dd>
        <input type="text" name="travelDays" class="inp_small" />日
        <input type="text" name="travelNight" class="inp_small" />晚
      </dd>
    </dl>
     <dl>
      <dt> 市场价：</dt>
      <dd>
        <input type="text" name="marketPrice" class="inp_small" /> /人起
      </dd>
    </dl>
    <dl>
      <dt> 现价：</dt>
      <dd>
        <input type="text" name="price" class="inp_small" /> /人起
      </dd>
    </dl>
     <dl>
      <dt> 产品缩略图：</dt>
      <dd>
        <div><font color="red">(尺寸:320px*210px)</font></div>
        <div style="width: 160px; height: 105px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;">

          <div  class="fileupload" onclick="uploadImgHtml(this,'litPic')"  style="position: absolute;width: 160px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
          </div>
        </div>
      </dd>
    </dl>
    <dl>
      <dt> 产品大图：</dt>
      <dd>
      <div><font color="red">(尺寸:宽度1920px为佳，比例2:1)</font></div>
        <div style="width: 240px; height: 120px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;">

          <div  class="fileupload" onclick="uploadImgHtml(this,'bigPic')" style="position: absolute;width: 240px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
          </div>
        </div>
      </dd>
    </dl>
    <dl>
      <dt> 关键词：</dt>
      <dd>
        <input type="text" name="keyWords" class="inp_w250" />
        <span class="tip">多关键词之间以英文逗号"|"分隔</span></dd>
    </dl>
    <div class="form_b" style="width: 300px; margin-left: 110px;">
      <input type="button" class="button-green" onclick="submitDo()" value="保 存">
      &nbsp;
      <input type="button" onclick="goUrl('{:U('/Home/Product/sell')}')" class="button-return" value="返回产品列表">
    </div>
  </form>
</div>
<script type="text/javascript">
  /**
   * [destinationSelect description]
   * @return {[type]} [description]
   */
  function destinationSelect(obj)
  {
    var destinationID = $(obj).val();
    if(destinationID == '0')
    {
      $(obj).nextAll('select').find('option').not('option[value="0"]').remove();
      return;
    }
    $.ajax({
      url: '{:U(MODULE_NAME.'/Product/destinationDataAjax')}',
      type: 'POST',
      dataType: 'json',
      data: {'destinationID': destinationID},
      success:function  (data) {

        $(obj).nextAll('select').find('option').not('option[value="0"]').remove();
        $(obj).next('select').append(data.destinationChildHtml);

      }
    })
  }
  /**
   * [destination_add description]
   * @return {[type]} [description]
   */
  function destinationHtmlAdd(obj)
  {

    var i = '0';
    $(obj).parent().parent().parent().find('select').each(function(index, el) {
      if(el.value == '0'){i++;}
    });

    if(i == '0')
    {
      if($('.selectDestinationNums').length < 3)
      {
        var html = '';
        html += '<div class="selectDestinationNums" style="margin-top: 10px;">';
            html += '<div class="selectDestination" style="float: left;">';
              html += '{$destinationHtml.areaSelect}';
              html += '&nbsp;';
              html += '{$destinationHtml.countrySelect}';
              html += '&nbsp;';
              html += '{$destinationHtml.citySelect}';
            html += '</div>';
            html += '<div class="operateDestination" style="float: left;">';
              html += '<a href="javascript:;" onclick="destinationHtmlDel(this)">删除</a>';
            html += '</div>';
            html += '<div class="clear"></div>';
        html += '</div>';
        $(obj).parent().parent().parent().append(html);
      }
      else
      {
         layer.msg('暂只支持最多三个目的地');
      }
    }
    else
    {
      layer.msg('请填写完整已有的目的地选项');
    }
  }
  /**
   * [destinationHtmlDel description]
   * @return {[type]} [description]
   */
  function destinationHtmlDel(obj)
  {
    $(obj).parent().parent().remove();
  }
/**
 * [departureCityAdd description]
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
function departureCityAdd (obj) 
{
  var i = '0';
  $(obj).parent().parent().parent().find('select[name="departureCityID[]"]').each(function(index, el) {
    if(el.value == '0'){i++;}
  });

  if(i == '0')
  {
    if($('.selectDepartureNums').length < 3)
    {
      var html = '';
          html += '<div class="selectDepartureNums" style="margin-top: 10px;">';
            html += '<div class="selectDeparture" style="float: left;" >';
              html += '{$departureHtml["0"]}';
            html += '</div>';
            html += '<div class="operateDeparture" style="float: left;" >';
              html += '<a href="javascript:;" onclick="departureCityDel(this)">删除</a>';
            html += '</div>';
            html += '<div class="clear"></div>';
          html += '</div>';
      $(obj).parent().parent().parent().append(html);
    }
    else
    {
       layer.msg('暂只支持最多三个出发地');
    }
  }
  else
  {
    layer.msg('请填写完整已有的出发地选项');
  }
}
/**
 * [departureCityDel description]
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
function departureCityDel (obj) 
{
  $(obj).parent().parent().remove();
}
/**
 * [submitDo description]
 * @return {[type]} [description]
 */
function submitDo() 
{ 
  if($('input[name="title"]').length > 0)
  {
    if($('input[name="title"]').val().length > 0)
    {
      $('input[name="title"]').css('border','1px green solid');
      $('#form_do').submit();
    }
    else
    {
      $('input[name="title"]').css('border','1px red solid');
    }
  }
  else
  {
    $('#form_do').submit();
  }

}
/**
 * [categoryLabelList description]主站分类标签分类
 * @return {[type]} [description]
 */
 function categoryLabelList (obj)
 {

   $.ajax({
     url: '{:U(MODULE_NAME.'/Product/categoryLabelList')}',
     type: 'get',
     dataType: 'json',
     data: {'id': $(obj).val()},
     success:function  (data)
     {
       $('#categoryLabelList').html(data.html);
     }
   })
 }

/**
 * [packCategory description]主站分类
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
 function packCategory (obj)
 {
   var packCategoryOne = $(obj).val();
   $(obj).nextAll().remove();
   if(packCategoryOne == 0)return;
   $.ajax({
     url: '{:U(MODULE_NAME.'/Product/packCategoryAjax')}',
     type: 'get',
     dataType: 'json',
     data: {'packCategoryOne': packCategoryOne},
     success:function (data)
     {
       $(obj).parent().append(data.html);
     }
   })

 }

/**
 * [destination description]
 * @param  {[type]} o    [description]
 * @param  {[type]} type [description]
 * @return {[type]}      [description]
 */
function destinationChange (o,type)
{
  var div = $(o).parent();
  var get = {};
  var obj = $(o);
  if(obj.val() == 0)
  {
    obj.nextAll('select').val('0');
    return;
  }

  if(type==1)
  {
  get.continent = div.find('[name="areaID"]').val();
    obj = div.find('[name="countryID"]');
  }
  else if(type==2)
  {
    get.country = div.find('[name="countryID"]').val();
    obj = div.find('[name="cityID"]');
  }
  else
  {
    return false;
  }

  $.get('/Home/Public/ajaxDestination',get, function (data, textStatus){
    obj.html(data);
  });
}


/**
 * [uploadImgHtml description]
 * @return {[type]} [description]
 */
function uploadImgHtml(obj,thumbImages)
{
  var sizeType = 0;
  switch (thumbImages)
  {
    case 'litPic':
      sizeType = 0;
      break;
    case 'bigPic':
      sizeType = 1;
      break;
  }

  var cityID = $('select[name="cityID[]"]:first').val();

  //iframe层-父子操作
  var Div = layer.open({
              type: 2,
              area: ['800px', '400px'],
              content: ['/Home/Public/uploadImages.html?&type=Product&sizeType='+sizeType+'&cityID='+cityID,'no'],
              btn: ['确认','取消'], //按钮
              yes: function(index, layero){ //或者使用btn1
                  //按钮【按钮一】的回调

                  var objlayer = $(window.frames['layui-layer-iframe'+index].document);
                  var objlayercurrimg = objlayer.find("#selectImg ul li .curr");
                  if(objlayercurrimg.length <= 0)
                  {
                    var imgUrl = objlayer.find("#dndArea input[name='fileData[]']").val();
                  }
                  else
                  {
                    var imgUrl = objlayercurrimg.parent().find('img').attr('src')
                  }

                  $(obj).empty();
                  $(obj).append('<img src="'+imgUrl+'" width="100%" height="100%"><input type="hidden" name="'+thumbImages+'" class="headerImg" value="'+imgUrl+'">');
                  layer.close(Div);
              },
              cancel: function(index){ //或者使用btn2
                  //按钮【按钮二】的回调
                  layer.close(Div);
              }
          });
}
</script>